<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<svg width="0" height="0">
			<defs>
				<!-- 转场渐变 -->
				<linearGradient id="transition1_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse">
					<stop stop-color="#F96C81" />
					<stop offset="1" stop-color="#FFB2C1" />
				</linearGradient>
				<linearGradient id="transition2_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse">
					<stop stop-color="#FED966" />
					<stop offset="1" stop-color="#FFECB0" />
				</linearGradient>
				<linearGradient id="transition3_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse">
					<stop stop-color="#86B4FF" />
					<stop offset="1" stop-color="#698AFF" />
				</linearGradient>
				<!-- 转场元素 -->
				<g id="transition_move1">
					<circle cx="24" cy="24" r="35" fill="url(#transition1_linear)"></circle>
				</g>
				<g id="transition_move2">
					<circle cx="24" cy="24" r="35" fill="url(#transition2_linear)"></circle>
				</g>
				<g id="transition_move3">
					<circle cx="24" cy="24" r="35" fill="url(#transition3_linear)"></circle>
				</g>
			</defs>
		</svg>
		<div class="tabbar">
			<div class="tabbar__item on">
				<div class="tabbar__svg">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
						<clipPath id="clipPath1">
							<path d="M27.646 3.02449C25.4072 1.65851 22.5928 1.6585 20.354 3.02448L7.5024 10.866C4.23852 12.5123 2 15.8947 2 19.7999V35.7999C2 41.3227 6.47715 45.7999 12 45.7999H36C41.5228 45.7999 46 41.3227 46 35.7999V19.7999C46 15.8947 43.7615 12.5123 40.4976 10.866L27.646 3.02449Z"/>
						</clipPath>
						<g class="icon" clip-path="url(#clipPath1)">
							<path class="icon_default" d="M27.646 3.02449C25.4072 1.65851 22.5928 1.6585 20.354 3.02448L7.5024 10.866C4.23852 12.5123 2 15.8947 2 19.7999V35.7999C2 41.3227 6.47715 45.7999 12 45.7999H36C41.5228 45.7999 46 41.3227 46 35.7999V19.7999C46 15.8947 43.7615 12.5123 40.4976 10.866L27.646 3.02449Z"
							 stroke="#AFB8CC" stroke-width="8" />
							<!-- stroke-width="8" svg描边模式是居中扩展描边。也就是内部外部都会扩展4px 由于设计搞是4px描边，再加上裁切了一部分，所以要改为8px -->
							<use class="transition_move1" href="#transition_move1"></use>
							<use class="transition_move2" href="#transition_move2"></use>
							<use class="transition_move3" href="#transition_move3"></use>
							<path class="path-circle" d="M31 28C31 31.866 27.866 35 24 35C20.134 35 17 31.866 17 28C17 24.134 20.134 21 24 21C27.866 21 31 24.134 31 28Z" stroke-linecap="round" stroke="#AFB8CC" stroke-width="4"/>
						</g>
					</svg>
				</div>
				<p class="tabbar__name">首页</p>
			</div>
			<div class="tabbar__item">
				<div class="tabbar__svg">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
						<clipPath id="clipPath2">
							<path d="M1 15C1 8.37258 6.37258 3 13 3H35C41.6274 3 47 8.37258 47 15V33C47 39.6274 41.6274 45 35 45H13C6.37258 45 1 39.6274 1 33V15Z"/>
						</clipPath>
						<g class="icon" clip-path="url(#clipPath2)">
							<path d="M1 15C1 8.37258 6.37258 3 13 3H35C41.6274 3 47 8.37258 47 15V33C47 39.6274 41.6274 45 35 45H13C6.37258 45 1 39.6274 1 33V15Z" stroke="#AFB8CC" stroke-linejoin="round" stroke-width="8" />
							<use class="transition_move1" href="#transition_move1"></use>
							<use class="transition_move2" href="#transition_move2"></use>
							<use class="transition_move3" href="#transition_move3"></use>
							<path class="path-arrow" stroke-linejoin="round" d="M19.4845 19.2494C19.4845 18.4796 20.3178 17.9984 20.9845 18.3833L30.1441 23.6717C30.8108 24.0566 30.8108 25.0188 30.1441 25.4037L20.9845 30.692C20.3178 31.0769 19.4845 30.5958 19.4845 29.826L19.4845 19.2494Z" stroke="#B1BACD" stroke-width="4" />
						</g>
					</svg>
				</div>
				<p class="tabbar__name">探索</p>
			</div>
			<div class="tabbar__item">
				<div class="tabbar__svg">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
						<clipPath id="clipPath3">
							<path d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 30.5467 2.62123 36.4811 6.87143 40.8111L4.74164 44.5C3.97184 45.8333 4.93408 47.5 6.47369 47.5L23.5 48C23.5 48 23.5035 47.9983 23.5102 47.9951C23.673 47.9984 23.8363 48 24 48Z" />
						</clipPath>
						<g class="icon" clip-path="url(#clipPath3)">
							<path class="icon_default" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 30.5467 2.62123 36.4811 6.87143 40.8111L4.74164 44.5C3.97184 45.8333 4.93408 47.5 6.47369 47.5L23.5 48C23.5 48 23.5035 47.9983 23.5102 47.9951C23.673 47.9984 23.8363 48 24 48Z"
							 stroke="#AFB8CC" stroke-linejoin="round" stroke-width="8" />
							<!-- stroke-width="8" svg描边模式是居中扩展描边。也就是内部外部都会扩展4px 由于设计搞是4px描边，再加上裁切了一部分，所以要改为8px -->
							<use class="transition_move1" href="#transition_move1"></use>
							<use class="transition_move2" href="#transition_move2"></use>
							<use class="transition_move3" href="#transition_move3"></use>
							<circle class="min_circle01" cx="13" cy="24" r="3" fill="#B1BACD"/>
							<circle class="min_circle02" cx="25" cy="24" r="3" fill="#B1BACD"/>
							<circle class="min_circle03" cx="37" cy="24" r="3" fill="#B1BACD"/>
						</g>
					</svg>
				</div>
				<p class="tabbar__name">尬聊</p>
			</div>
			<div class="tabbar__item">
				<div class="tabbar__svg">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
						<clipPath id="clipPath4">
							<path d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z"/>
						</clipPath>
						<g class="icon" clip-path="url(#clipPath4)">
							<path d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z" stroke="#AFB8CC" stroke-linejoin="round" stroke-width="8"/>
							<use class="transition_move1" href="#transition_move1"></use>
							<use class="transition_move2" href="#transition_move2"></use>
							<use class="transition_move3" href="#transition_move3"></use>
							<path class="path-mouth"  d="M14 30C20.5 35.5 21 30 24 30C26.5008 30 26.5 35.5 34 30" stroke="#AFB8CC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
						</g>
					</svg>
				</div>
				<p class="tabbar__name">我的</p>
			</div>
		</div>

		<script type="text/javascript">
			let path = document.querySelector('.path-mouth')
			console.log(path.getTotalLength());
			var tabbarItem = document.querySelectorAll('.tabbar__item')
			console.log(Array.from(tabbarItem));
			tabbarItem.forEach(item=>{
				item.addEventListener('click',function(e){
					tabbarItem.forEach(item=>{
						item.classList.remove('on')
					})
					this.classList.add('on')
				})
			})
		</script>
	</body>
</html>
